<template>
  <div class="view-login">
    <div class="login-container">
      <div class="view-login-left">
        <img src="@/assets/images/login-left.jpg" alt="login"/>
      </div>
      <div class="view-login-right">
        <h2>登录</h2>
        <el-form :model="loginForm" :rules="loginFormRules">
          <el-form-item class="login-name"  prop="name">
            <el-input v-model="loginForm.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item class="login-password" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" ></el-input>
          </el-form-item>
          <div class="login-btn-div">
            <el-button class="login-btn" type="primary" style="width: 100%" @click="login" >登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ViewLogin",
  data(){
    return{
      loginForm:{
        name:'',
        password:''
      },
      adminConfig:{
        name:'HappySir',
        password:'123456'
      },
      loginFormRules:{
        name:[
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    login(){
      if (this.loginForm.name == this.adminConfig.name && this.loginForm.password == this.adminConfig.password){
        window.sessionStorage.setItem("ADMIN", true);
        this.$router.push('/');
        this.$message({
          showClose:false,
          message:'欢迎登录！',
          type:"success"
        })
      }else{
        this.loginForm.name = '';
        this.loginForm.password = '';
        this.$message({
          showClose:false,
          message:'账户密码不一致！',
          type:"error"
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .view-login{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-container{
      width: 800px;
      height: 400px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;

      .view-login-left{
        height: 100%;
        width: 65%;

        img{
          width: 100%;
          height: 100%;
        }
      }
      .view-login-right{
        width: 35%;
        padding: 30px;
        background-color: whitesmoke;

        .login-btn-div{
          width: 100%;
        }
      }
    }
  }
</style>